<template>
  <vxe-modal v-model="modalVisible" ref="xModal" title="编辑项目" min-width="900" width="900" height="400" resize remember fullscreen>
    <template v-slot>
      <el-card>
        <vxe-form
          ref="xForm"
          class="data-form"
          title-align="right"
          title-width="100"
          :data="formData"
          :rules="formRules"
          :loading="loading"
          @submit="submitEvent"
          @reset="resetEvent">
          <vxe-form-item title="项目名称" field="Name" span="24">
            <template v-slot="scope">
              <vxe-input v-model="formData.Name" placeholder="请填写名称" clearable @input="$refs.xForm.updateStatus(scope)"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="项目别名" field="Aliasname" span="24">
            <template v-slot="scope">
              <vxe-input v-model="formData.Aliasname" placeholder="取个代号" clearable @input="$refs.xForm.updateStatus(scope)"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="描述" field="Desc" span="24">
            <template v-slot="scope">
              <editor-bar v-model="formData.Desc" :isClear="isClear" @change="$refs.xForm.updateStatus(scope)"></editor-bar>
            </template>
          </vxe-form-item>
          <vxe-form-item title="开始和结束日期" field="Started" span="12">
            <template v-slot>
              <el-date-picker v-model="formData.Started" type="date" placeholder="开始日期"></el-date-picker>
            </template>
          </vxe-form-item>
          <vxe-form-item title="To" field="Ended" span="12" title-width="30">
            <template v-slot>
              <el-date-picker v-model="formData.Ended" type="date" placeholder="结束日期"></el-date-picker>
            </template>
          </vxe-form-item>
          <vxe-form-item title="项目负责人" field="Projuserid" span="24">
            <template v-slot="scope">
<!--              <user-select v-model="formData.Projuserid" placeholder="请选择项目负责人" @change="$refs.xForm.updateStatus(scope)"></user-select>-->
              <select-project-team v-model="formData.Projuserid" placeholder="请选择项目负责人" :queryValue="{ id: formData.Id }"
                                   :showValueShow="{ 'Userrealname': formData.Projuserrealname }"></select-project-team>
            </template>
          </vxe-form-item>
          <vxe-form-item title="产品负责人" field="Produserid" span="24">
            <template v-slot="scope">
<!--              <user-select v-model="formData.Produserid" placeholder="请选择产品负责人" @change="$refs.xForm.updateStatus(scope)"></user-select>-->
              <select-project-team v-model="formData.Produserid" placeholder="请选择产品负责人" :queryValue="{ id: formData.Id }"
                                   :showValueShow="{ 'Userrealname': formData.Produserrealname }"></select-project-team>
            </template>
          </vxe-form-item>
          <vxe-form-item title="测试负责人" field="Testuserid" span="24">
            <template v-slot="scope">
<!--              <user-select v-model="formData.Testuserid" placeholder="请选择测试负责人" @change="$refs.xForm.updateStatus(scope)"></user-select>-->
              <select-project-team v-model="formData.Testuserid" placeholder="请选择测试负责人" :queryValue="{ id: formData.Id }"
                                   :showValueShow="{ 'Userrealname': formData.Testuserrealname }"></select-project-team>
            </template>
          </vxe-form-item>
          <vxe-form-item title="发布负责人" field="Publuserid" span="24">
            <template v-slot="scope">
<!--              <user-select v-model="formData.Publuserid" placeholder="请选择发布负责人" @change="$refs.xForm.updateStatus(scope)"></user-select>-->
              <select-project-team v-model="formData.Publuserid" placeholder="请选择发布负责人" :queryValue="{ id: formData.Id }"
                                   :showValueShow="{ 'Userrealname': formData.Publuserrealname }"></select-project-team>
            </template>
          </vxe-form-item>
          <vxe-form-item title=" " span="24" style="text-align: center">
            <template v-slot>
              <vxe-button status="primary" size="medium" type="submit">提交</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </el-card>
    </template>
  </vxe-modal>
</template>

<script>
import projectApi from '@/api/projectApi';
import UserSelect from '@/components/element/UserSelect';
import EditorBar from '@/components/element/wangeditor'
import SelectProjectTeam from "@/components/element/select/SelectProjectTeam";
export default {
  components: {
    UserSelect,
    EditorBar,
    SelectProjectTeam
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editItem: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    modalVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data () {
    return {
      loading: false,
      isClear: true,
      formData: {
        Name: '',
        Aliasname: '',
        Desc: '',
        Projuserid: '',
        Produserid: '',
        Testuserid: '',
        Publuserid: '',
        Started: Date.now(),
        Ended: Date.now()
      },
      formRules: {
        Name: [{ required: true, message: '请填写项目名称', trigger: 'blur' }],
        Aliasname: [{ required: true, message: '请填写项目别名', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    // 暂未实现
    // window.addEventListener('resize', () => {
    //   this.$refs.xModal.recalculate();
    //   this.$refs.xModal.zoom()
    // })
  },
  methods: {
    submitEvent () {
      projectApi.modify(this.formData).then(res => {
        if (res && res.code === 1) {
          this.modalVisible = false;
          this.$emit('update');
          this.$message.success('修改成功');
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => this.$message.error('修改失败'));
    },
    resetEvent () {},
    clearData () {
      this.formData = {
        Name: '',
        Aliasname: '',
        Desc: '',
        Projuserid: '',
        Produserid: '',
        Testuserid: '',
        Publuserid: '',
        Started: Date.now(),
        Ended: Date.now()
      }
    }
  },
  watch: {
    modalVisible: {
      handler: function (val) {
        if (val) {
          Object.assign(this.formData, this.editItem);
        } else {
          this.clearData()
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped src="@/assets/css/page/projectManage/edit.scss"></style>
